<template>
  <div class="filter_pop" v-if="isShowFilterPop">
    <div class="pop_cont">
      <div class="">
        <div class="problem_tit">活动所属类型：</div>
        <div class="answer_box dis_flex">
          <div
            class="answer_txt"
            :class="{ active: form.activityTypeId == item.id }"
            v-for="(item, index) in activityType"
            :key="index"
            @click="toSelect(item.id, 1)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div>
        <div class="problem_tit">活动发布人：</div>
        <div class="answer_box dis_flex">
          <div
            class="answer_txt"
            :class="{ active: form.activityPublisherId == item.id }"
            v-for="(item, index) in publisherList"
            :key="index"
            @click="toSelect(item.id, 2)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div>
        <div class="problem_tit">活动当前状态：</div>
        <div class="answer_box dis_flex">
          <div
            class="answer_txt"
            :class="{ active: form.activityStatusId == item.id }"
            v-for="(item, index) in statusList"
            :key="index"
            @click="toSelect(item.id, 3)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="dis_flex between">
        <div class="clear_btn footer_btn" @click="toClear">清空</div>
        <div class="confirm_btn footer_btn" @click="toConfirm">确定</div>
      </div>
    </div>
  </div>
  <!-- </van-popup> -->
</template>

<script>
import {
  queryActivityType,
  queryPublisherSelector,
} from "@/api/funcation/groupActivity";
export default {
  props: {
    isShowFilterPop: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isShowPop: true,
      activityType: [],
      publisherList: [],
      statusList: [
        {
          name: "未开始",
          id: 1,
        },
        {
          name: "报名阶段",
          id: 2,
        },
        {
          name: "签到阶段",
          id: 3,
        },
        {
          name: "实施阶段",
          id: 4,
        },
        {
          name: "已结束",
          id: 5,
        },
      ],
      form: {
        activityTypeId: "",
        activityPublisherId: "",
        activityStatusId: "",
      },
    };
  },
  created() {
    //活动所属类型
    this.getActivityType();
    //发布人
    this.getPublisherSelector();
  },
  methods: {
    async getActivityType() {
      let res = await queryActivityType();
      if (res.code == 200) {
        this.activityType = res.data;
      }
    },
    async getPublisherSelector() {
      let res = await queryPublisherSelector();
      if (res.code == 200) {
        this.publisherList = res.data;
      }
    },
    toSelect(id, val) {
      if (val == 1) {
        this.form.activityTypeId = id;
      } else if (val == 2) {
        this.form.activityPublisherId = id;
      } else if (val == 3) {
        this.form.activityStatusId = id;
      }
    },
    //确定
    toConfirm() {
      this.isShowPop = false;
      this.$emit("getFilterInfo", this.form);
    },
    toClear() {
      this.form = {
        activityStatusId: "",
        activityTypeId: "",
        activityPublisherId: "",
      };
    },
  },
};
</script>

<style lang="less" scoped>
//弹框
::v-deep.van-popup--center {
  width: 100%;
}

.dis_flex {
  display: flex;
  align-items: center;
}

.just-spa-between {
  justify-content: space-between;
}

.filter_pop {
  position: fixed;
  top: 200px;
  left: 0;
  width: 100%;
  height: calc(100% - 100px);
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.pop_cont {
  position: fixed;
  top: 160px;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  background-color: white;
  padding: 20px;
  border-radius: 0px 0px 10px 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1001;
}

.problem_tit {
  font-weight: bold;
  font-size: 14px;
  line-height: 14px;
  color: #000000;
  margin: 17px 0;
}

.answer_box {
  flex-wrap: wrap;
  margin: -6.67px -6.67px 0 0;
}

.answer_txt {
  width: 102px;
  height: 33.33px;
  line-height: 33.33px;
  text-align: center;
  background: #f4f6fa;
  border-radius: 6.67px;
  font-weight: bold;
  font-size: 14px;
  color: #555555;
  margin: 6.67px 6.67px 0 0;
}

.active {
  border: 1px solid #00aeff;
  font-size: 14px;
  color: #00aeff;
}

.footer_btn {
  width: 155px;
  height: 33.33px;
  line-height: 33.33px;
  text-align: center;
  font-size: 15.33px;
  font-weight: bold;
  border-radius: 6.67px;
  margin-top: 33.33px;
}

.clear_btn {
  border: 0.33px solid #dddddd;
  color: #333333;
}

.confirm_btn {
  color: #fff;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #0aa7f4;
}
</style>
